<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .wai{
      width: 200px;
      height: 200px;
      background-color: blue;
    }
    .nei{
      width: 100px;
      height: 100px;
      background-color: red;
    }
    .da{
      width: 50px;
      height: 50px;
    }
  </style>
</head>
<body>
  <div class="wai">
    <div class="nei"></div>
  </div>
  <script src="./jquery-1.12.4.min.js"></script>
  <script>
    // click()点击事件
    $(".wai").click(function () {
      console.log("wai");
    });
    $(".nei").click(function () {
      console.log("nei");
    })
    // jq mouseenter和mouseleave jq自己增加的
    // 没有事件冒泡
    // 移入 移出
      // $(".wai").mouseenter(function () {
      //   console.log("wai1");
      // });
      // $(".wai").mouseleave(function () {
      //   console.log("wai2");
      // })
      // $(".nei").mouseenter(function () {
      //   console.log("nei1");
      // });
      // $(".nei").mouseleave(function () {
      //   console.log("nei2");
      // })

    // jq mouseover和mouseout
    // 有事件冒泡
    // 移入 移出
      // $(".wai").mouseover(function () {
      //   console.log("wai1");
      // });
      // $(".wai").mouseout(function () {
      //   console.log("wai2");
      // })
      // $(".nei").mouseover(function () {
      //   console.log("nei1");
      // });
      // $(".nei").mouseout(function () {
      //   console.log("nei2");
      // })

      // jq hover 鼠标移入执行参数1 移出参数2
    $(".wai").hover(function () {
      $(".nei").addClass("da")
    },function () {
      $(".nei").removeClass("da")
    })
  </script>
</body>
</html>          